<script lang="ts" setup>
import { useCoursesStore } from '@/stores/coursesData.ts';
import { HomeOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '培训课程', path: '' },
];

// Pinia
const courseStore = useCoursesStore();

function updateCourseList() {
  courseStore.updateCourseData();
}
updateCourseList();

// 搜索数据
const searchTerm = ref<string>('');

const onSearch = () => {
  courseStore.updateCourseData(searchTerm.value);
};

// 获取 Vue Router 实例
const router = useRouter();

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转到详细页面
const goToDetailPage = (id: string) => {
  router.push({ name: 'PXDetailPage', params: { id } });
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span class="">当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <a-input-search
          v-model:value="searchTerm"
          style="width: 300px"
          placeholder="输入关键词(课程名称)搜索"
          enter-button="搜索"
          size="middle"
          @search="onSearch"
          @clear="updateCourseList()"
          allow-clear
        />
        <span class="ml-4 cursor-pointer" @click="goBack"> 【返回上一页】 </span>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-shadow mt-4 bg-white p-4">
      <div class="bg-white" style="border-bottom: 2px solid rgb(41, 156, 12)">
        <div class="inline-block p-2" style="background-color: rgb(41, 156, 12)">
          <span class="mx-4 text-xl font-bold text-white">培训课程</span>
        </div>
      </div>
      <div class="bg-white p-8">
        <!-- 判断数据是否为空 -->
        <div v-if="courseStore.getCourseData.length === 0" class="flex items-center justify-center">
          <div class="flex justify-center">
            <el-empty class="m-auto" description="暂无数据" />
          </div>
        </div>

        <div v-else class="grid min-h-[400px] grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          <!-- 渲染课程数据 -->
          <a-card
            v-loading="courseStore.getCourseLoading"
            v-for="achievement in courseStore.getCourseData"
            :key="achievement.id"
            class="group relative overflow-hidden rounded-xl border border-gray-200 shadow-md transition-all duration-500 hover:-translate-y-1 hover:shadow-xl"
          >
            <div class="cursor-pointer" @click="goToDetailPage(achievement.id)">
              <img
                :src="achievement.image"
                :alt="achievement.title"
                class="mb-4 h-48 w-full rounded-md object-cover"
              />
              <h3 class="mb-2 text-lg font-semibold">{{ achievement.title }}</h3>
              <div class="mb-1">
                <div
                  v-if="achievement.date && achievement.date.trim()"
                  class="flex items-center text-gray-500"
                >
                  <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                    ></path>
                  </svg>
                  <span class="text-sm font-medium">{{ achievement.date }}</span>
                </div>
                <div v-else class="flex items-center text-gray-400">
                  <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                    ></path>
                  </svg>
                  <span class="text-sm italic">时间待定</span>
                </div>
              </div>
              <p class="mb-1 text-sm text-gray-600">地点：{{ achievement.location }}</p>
              <p class="mb-2 text-sm text-gray-600">内容：{{ achievement.instructor }}</p>
              <!-- 底部操作区 -->
              <div class="flex items-center justify-between border-t border-gray-100 pt-4">
                <div
                  class="flex items-center text-blue-600 transition-colors duration-200 group-hover:text-blue-700"
                >
                  <span class="mr-2 text-sm font-semibold">了解更多</span>
                  <svg
                    class="h-4 w-4 transform transition-transform duration-200 group-hover:translate-x-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 8l4 4m0 0l-4 4m4-4H3"
                    ></path>
                  </svg>
                </div>
                <!-- 状态指示器 -->
                <div class="flex items-center">
                  <div class="h-2 w-2 animate-pulse rounded-full bg-green-400"></div>
                  <span class="ml-2 text-xs text-gray-500">最新</span>
                </div>
              </div>
            </div>
          </a-card>
        </div>

        <div class="mt-8 text-center">
          <a-pagination
            :current="courseStore.coursePage.currentPage"
            :total="courseStore.coursePage.total"
            :pageSize="courseStore.coursePage.pageSize"
            @change="
              (page) => {
                courseStore.setCoursePage(page);
                updateCourseList();
              }
            "
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
